<template>
    <div class="choose-user">
        <!-- {{ userList }}<br/> -->
        <!-- {{ userChecked }}<br/> -->
        <!-- {{ userCheckedNew }}<br/> -->
        <!-- addLess: {{ addLess }} -->
        <!-- 创建者id: {{ creatorId }} -->
        <ComSearch @handleSearch="searchKey = $event" :isIcon="false"></ComSearch>
        <div class="choose-user-list">
            <template v-if="filteredList.length">
                <div v-for="item in filteredList" :key="item.id" class="item" @click="handleChecked(item)">
                    <a-checkbox v-model="item.isChecked" :disabled="item.disabled" @change="handleChecked(item)" :class="{ 'add-checkbox': !item.isCreator || item.disabled }" v-if="addLess === 'add'"></a-checkbox>
                    <a-checkbox v-model="item.isChecked" :disabled="item.disabled || item.id === creatorId" @change="handleChecked(item)" :class="{ 'less-checkbox': !item.isCreator }" v-else-if="addLess === 'less'"></a-checkbox>
                    <a-checkbox v-model="item.isChecked" :disabled="item.id === loginId()" @change="handleChecked(item)" :class="{ 'add-checkbox': !item.isCreator }" v-else></a-checkbox>
                    <ComAvatar :size="26" :sex="item.sex" :keys="item.initialLetter" class="avatar"></ComAvatar>
                    <span class="name">{{ item.nickname }}</span>
                    <span class="email">({{ item.email }})</span>
                </div>
            </template>
            <a-empty v-else></a-empty>
        </div>
    </div>
</template>
<script lang="ts" setup>
const props = defineProps({
    userList: { type: Array, default: () => { return [] } },
    userChecked: { type: Array, default: () => { return [] } },
    creatorId: { type: Number, default: () => { return 0 } },
    addLess: { type: String, default: () => { return '' } }, // add添加  less移除
})
import { loginId } from '@/utils/login';
const emit = defineEmits(['handleClose', 'handleSubmit']);
import AvatarIcon from '@/assets/icon-logo.png';
const userListNew = ref([]); // 新的用户列表
const userCheckedNew = ref([]); // 新的已勾选
const searchKey = ref(''); // 搜索关键字

watch(() => [props.userList, props.userChecked], ([userList, userChecked]) => {
    userCheckedNew.value = JSON.parse(JSON.stringify(userChecked)) || [];
    userListNew.value = userList.map(item => {
        item.isCreator = item.id === props.creatorId;
        item.isChecked = userCheckedNew.value?.includes(item.id);
        return item;
    }) || [];
}, { immediate: true })

// 计算过滤后的数据
const filteredList2 = computed(() => {
    if(props.addLess === 'less'){
        return userListNew.value.filter(child => props.userChecked.includes(child.id) && child.id !== props.creatorId);
    }else{
        userListNew.value.map(item => {
            return item.disabled = props.userChecked.includes(item.id);
        })
        return userListNew.value;
    }
});


// 计算过滤后的数据
const filteredList = computed(() => {
    const query = searchKey.value.trim().toLowerCase();
    if (query) {
        return filteredList2.value.filter(item => item.nickname.trim().toLowerCase().includes(query));
    } else {
        if(props.addLess === 'less'){
            return userListNew.value.filter(child => props.userChecked.includes(child.id) && child.id !== props.creatorId);
        }else{
            userListNew.value.map(item => {
                return item.disabled = props.userChecked.includes(item.id);
            })
            return userListNew.value;
        }
    }
});

// 勾选
const handleChecked = (row) => {
    if(row.id === loginId()) return;
    // 只能勾选非当前登录人
    if((!row.isCreator && !row.disabled) || !row.isCreator && props.addLess === 'less' || !props.addLess){
        const isHave = userCheckedNew.value.includes(row.id);
        if(!isHave){
            userCheckedNew.value.push(row.id);
        }else{
            const isIndex = userCheckedNew.value.findIndex(item => item === row.id);
            userCheckedNew.value.splice(isIndex, 1);
        }
        userListNew.value.map(item => {
            if(item.id === row.id){
                item.isChecked = !item.isChecked;
            }
            return item;
        })
    }
}

// 取消
const handleCancel = () => {
    userCheckedNew.value = JSON.parse(JSON.stringify(props.userChecked));
    userListNew.value.map(item => {
        return item.isChecked = userCheckedNew.value?.includes(item.id);
    })
    emit('handleClose');
}

// 确定
const handleSubmit = () => {
    const removed = []; // 被移除成员
    const added = []; // 新添加成员
    for (const member of props.userChecked) {
        if (!userCheckedNew.value.includes(member)) {
            removed.push(member);
        }
    }
    for (const member of userCheckedNew.value) {
        if (!props.userChecked.includes(member)) {
            added.push(member);
        }
    }
    console.log("被移除的成员:", removed);
    console.log("被添加的成员:", added);
    emit('handleSubmit', props.addLess ? {
        removed,
        added,
        isChoose: true,
        userIds: userCheckedNew.value,
        addLess: props.addLess
    } : userCheckedNew.value);
    emit('handleClose');
}

defineExpose({
    handleCancel,
    handleSubmit,
    userCheckedNew,
})
</script>
<style lang="scss" scoped>
.choose-user{
    &-list{
        margin-top: 15px;
        height: 350px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        .item{
            display: flex;
            align-items: center;
            cursor: pointer;
            .avatar{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin-left: 10px;
            }
            .name{
                margin: 0 5px 0 8px;
            }
        }
        :deep(.less-checkbox){
            cursor: pointer;
            .arco-icon-hover{
                cursor: pointer;
            }
            .arco-checkbox-icon{
                background: white;
                border-color: 2px solid red;
            }
            &.arco-checkbox-checked{
                .arco-checkbox-icon{
                    background: rgb(var(--primary-6));
                    border-color: rgb(var(--primary-6));
                }
            }
        }
    }
}
</style>